<template>
	<div>
		<div class="header">
			<h3>知乎登录</h3>
		</div>
		<div class="yanzheng">
			<span>手机号：</span>
			<input type="number" placeholder="请输入手机号" v-model="tel_num" maxlength="11" @blur="blur_phone" class="tel_pho" @focus="focus_phone">
			<button @click="getCode">{{ codeTxt }}</button>
			<br>
			<br>
			<br>
			<p v-show="wrong" class="wrong">手机号码不正确，请输入正确的手机号</p>

			<span>验证码：</span>
			<input type="number" placeholder="请输入验证码" v-model="Code" class="code">
		</div>
		<div class="login1" @click="log">
			<h4>登录</h4>
		</div>
		<!-- <van-popup v-model="show">请输入正确的手机号</van-popup> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tel_num: '',
				Code: "",
				theinput: '',
				thein: '',
				wrong: false,
				isCodeIng: false, //是否倒计时
				codeTxt: '获取验证码',
				islogin:true
			}
		},
		mounted() {

		},
		methods: {
			getCode: function() {
				let p1 = /^(13[0-9]\d{8}|15[0-35-9]\d{8}|18[0-9]\{8}|14[57]\d{8})$/;
				if (!p1.test(this.tel_num)) {
					this.$dialog.alert({
						message: '请输入正确的手机号',
						theme: 'round-button',
					})
				}else if (!this.isCodeIng) {
					this.getSendCode()
					//获取验证码倒计时
					this.isCodeIng = true;
					let time = 30;
					let timer = setInterval(() => {
						time--;
						this.codeTxt = '重新获取' + time + 's';
						if (time <= 0) {
							this.codeTxt = '获取验证码';
							this.isCodeIng = false;
							clearInterval(timer);
						}
					}, 1000);
				}
			},
			getSendCode: function() {
				this.$http.post('http://chonghekj.com/daily/index.php/Home/user/getSmsCode', this.$qs.stringify({
						telphone: document.querySelector(".tel_pho").value
					}))
					.then((res) => {
						console.log(res)
					})
			},
			// 失焦验证
			blur_phone: function() {
				let thein = document.querySelector(".tel_pho").value;
				let p2 = /^(13[0-9]\d{8}|15[0-35-9]\d{8}|18[0-9]\{8}|14[57]\d{8})$/
				if (p2.test(thein) == false) {
					document.querySelector(".tel_pho").value = "";
					this.wrong = true
				} else {
					this.wrong = false
				}
			},
			// 聚焦验证
			focus_phone: function() {
				this.wrong = false
			},
			log: function() {
				this.$http.post('http://chonghekj.com/daily/index.php/Home/user/login', this.$qs.stringify({
						telphone: this.tel_num,
						smscode: this.Code
					}))
					.then((res) => {
						console.log(res)
						this.tel_num = '',
						this.Code = '',
						localStorage.setItem('userinfo', JSON.stringify({
							islogin:this.islogin,
							id: res.data.data.id,
							username: res.data.data.username,
							access_token: res.data.data.access_token
						}))
						this.$router.push({
							path: '/mine',
							query: {
								id: res.data.data.id,
								username: res.data.data.username,
								access_token: res.data.data.access_token
							}
						})

					})
			},
			// Login1:function(){

			// }
		}
	}
</script>

<style lang="less">
	.header {
		width: 100%;
		height: 100px;
		background: #1989FA;
		text-align: center;

		h3 {
			color: #FFFFFF;
			padding-top: 10px;
			font-size: 50px;
		}

	}
	.yanzheng {
		width: 100%;
		height: 100px;
		text-align: center;
		margin-top: 50px;
		position: relative;

		input {
			vertical-align: middle;
			width: 60%;
			height: 40px;
			border: none;
			border-bottom: 1px solid #969799;
		}

		button {
			position: absolute;
			top: 80%;
			right: 10%;
			background: #008000;
			border: 1px solid #008000;
			padding: 5px;
			border-radius: 5px;
			color: #E8E8E8;
		}

		.wrong {
			position: absolute;
			top: 50%;
			left: 28%;
			font-size: 12px;
			color: #FF0000;
		}
	}

	.login1 {
		width: 50%;
		margin: 30px auto;
		text-align: center;

		h4 {
			font-size: 30px;
			color: #FFFFFF;
			background: #0570DB;
			padding: 5px 10px;
			border-radius: 5px;
		}
	}
</style>
<style>

</style>
